<template>
  <view class="boxs">
    <div class="btns">
      <div class="contentt">
        <!-- 灰色的 -->
        <image class="img" v-if="daily_answer_count == 0" src="/static/0.png" mode="widthFix"></image>
        <!--  亮色的 -->
        <image class="img" @click="goanswer" v-if="daily_answer_count != 0" src="/static/0s.png" mode="widthFix"></image>
      </div>
      <div class="contentt" @click="godraw">
        <image class="img" src="/static/1s.png" mode="widthFix"></image>
      </div>

    </div>

    <div class="xinxibox" v-if="showxinxi">
      <div class="xinxiindex">
        <!-- <svg t="1756005748318" class="guanbic" @click="closethis" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="11022" width="200" height="200">
        <path
          d="M563.626667 512l155.306666 155.093333a36.693333 36.693333 0 0 1-51.84 51.84L512 563.626667l-155.093333 155.306666a36.693333 36.693333 0 0 1-51.84-51.84L460.373333 512l-155.306666-155.093333a36.693333 36.693333 0 0 1 51.84-51.84L512 460.373333l155.093333-155.306666a36.693333 36.693333 0 0 1 51.84 51.84z m-490.666667 0A438.826667 438.826667 0 1 0 512 73.173333 438.826667 438.826667 0 0 0 73.173333 512zM0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512z"
          fill="#515151" p-id="11023"></path>
      </svg> -->
        <div class="thett">信息填写</div>
        <div class="form-group">
          <label class="required">姓名</label>
          <input type="text" class="form-control" :class="{ error: errors.name }" v-model="formData.username"
            placeholder="请输入真实姓名" @blur="validateName">
          <div class="error-message" v-if="errors.name">
            <i>⚠</i> {{ errors.name }}
          </div>
        </div>

        <div class="form-group">
          <label class="required">手机号码</label>
          <input type="tel" class="form-control" :class="{ error: errors.phone }" v-model="formData.phone"
            placeholder="请输入11位手机号码" @blur="validatePhone" maxlength="11">
          <div class="error-message" v-if="errors.phone">
            <i>⚠</i> {{ errors.phone }}
          </div>
        </div>
        <button type="submit" class="btn-submit" @click="submitForm">提交信息</button>
      </div>
    </div>
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  components: {}, //注册插件
  data() {
    return {
      showxinxi: false,
      formData: {
        name: '',
        phone: '',
        idCard: '',
      },
      inviteCode: "",
      errors: {
        name: '',
        phone: '',
        idCard: '',
        address: ''
      },
      total_draw_count: 0,
      daily_answer_count: 0
    }
  },
  created() {

  },
  async onLoad(options) {
    // 别人得邀请码
    this.inviteCode = options.invite_code





  },
  onShow() {


    this.showxinxi = true
    if (localStorage.getItem("userinfo")) {
      let item = JSON.parse(localStorage.getItem("userinfo"))
      this.formData.username = item.username ? item.username : ''
      this.formData.phone = item.phone ? item.phone : ''
      this.formData.idCard = item.idCard ? item.idCard : ''
      this.showxinxi = false



      setTimeout(() => {
        request({
          url: "/api/user/save",
          method: 'POST',
          data: {
            username: this.formData.username,
            phone: this.formData.phone,
            idcard: this.formData.idCard,
            invite_code: this.inviteCode
          }
        }).then(res => {
          console.log(res)


          localStorage.setItem("userinfo", JSON.stringify(res.data))
          this.getuser()
        });
      }, 100);
    } else {
      this.showxinxi = true
    }
    if (localStorage.getItem("userinfo")) {
      this.getuser()
    }
  },
  methods: {
    async getuser() {
      let res = await request({
        url: "/api/user/getUserInfo",
        data: {
          user_id: JSON.parse(localStorage.getItem("userinfo")).id
        },
        method: 'GET',
      })
      console.log(res)
      this.total_draw_count = res.data.total_draw_count
      this.daily_answer_count = res.data.daily_answer_count
      localStorage.setItem("userinfo", JSON.stringify(res.data))
    },

    closethis() {

    },
    validateName() {
      if (!this.formData.username) {
        this.errors.name = '请输入真实姓名';
        return false;
      } else if (this.formData.username.length < 2) {
        this.errors.name = '姓名至少需要2个字符';
        return false;
      } else {
        this.errors.name = '';
        return true;
      }
    },

    validatePhone() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!this.formData.phone) {
        this.errors.phone = '请输入手机号码';
        return false;
      } else if (!phoneRegex.test(this.formData.phone)) {
        this.errors.phone = '请输入有效的手机号码';
        return false;
      } else {
        this.errors.phone = '';
        return true;
      }
    },
    submitForm() {
      const isNameValid = this.validateName();
      const isPhoneValid = this.validatePhone();
      // const isIdCardValid = this.validateIdCard();
      // const isAddressValid = this.validateAddress();

      if (isNameValid && isPhoneValid) {
        // 表单验证通过，显示成功弹窗
        this.showPopup = true;

        request({
          url: "/api/user/save",
          method: 'POST',
          data: {
            username: this.formData.username,
            phone: this.formData.phone,
            idcard: this.formData.idCard,
            invite_code: this.inviteCode
          }
        }).then(res => {
          console.log(res)

          this.showxinxi = false;
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          });
          localStorage.setItem("userinfo", JSON.stringify(res.data))
          this.getuser()
        });
        console.log('表单提交数据:', this.formData);
      } else {
        // 表单验证失败，滚动到第一个错误处
        this.$nextTick(() => {
          const firstError = document.querySelector('.error');
          if (firstError) {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
          }
        });
      }
    },
    godraw() {
      uni.navigateTo({
        url: '/pages/draw/index'
      });
    },
    goanswer() {
      uni.navigateTo({
        url: '/pages/answerQuestions/index'
      });
    }
  }
}
</script>

<style scoped>
.xinxibox {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}

.guanbic {
  width: 50rpx;
  height: 50rpx;
  float: right;
  margin-right: 10rpx;
}

.btn-submit {
  width: 70%;
  padding: 0 16px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;

  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.btn-submit:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
}

.form-control {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid #91d5ff;
  border-radius: 5px;
  font-size: 16px;
  line-height: 80rpx;
  min-height: 80rpx;
  background-color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s;
  text-align: left;
}

.form-control:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-control.error {
  border-color: #ff7875;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #000000;
  font-weight: 500;
  font-size: 15px;
}

.required::after {
  content: '*';
  color: #ff7875;
  margin-left: 3px;
}

.required {
  text-align: left;
}

.thett {
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
  line-height: 100rpx;
}

.xinxiindex {
  width: 80%;
  padding: 0 20rpx;
  padding-top: 40rpx;
  padding-bottom: 60rpx;
  box-sizing: border-box;
  border-radius: 30rpx;
  /* height: 700rpx; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(255, 255, 255, 0.7);
  position: absolute;
}

.error-message {
  color: #ff7875;
  font-size: 13px;
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.error-message i {
  margin-right: 5px;
}

.contentt {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
}

.contentt .img {
  display: block;
  position: absolute;
  width: 90%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.btns {
  width: 80%;
  height: 110rpx;
  bottom: 200rpx;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.boxs {
  background: url("/static/bg.webp");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  justify-items: center;
}

.contentt {
  flex: 1;
}
</style>